<%-- 
    Document   : AddUser.jsp
    Created on : 15 déc. 2013, 18:26:36
    Author     : InfoA1 INSA Toulouse
--%>
    
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<!-- add user page -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>create user</title>
        <!-- jquery -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            
        <!-- jqueryui -->
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
            
            
        <script src="inc/js/create-user.js"></script>
            
        <link rel="stylesheet" href="inc/css/create-user.css">
        <link rel="stylesheet" href="inc/css/bootstrap.min.css">
    </head>
    <body>
        <div id="dialog-form" title="Create new user">
            <div id="header">
                <div class="validateTips"></div>
                <div id="loading"><img src="inc/img/ajax-loader-circle.gif" alt="creating user..."/></div>
                <div id="help-tooltip"><span class="glyphicon glyphicon-question-sign"></span> hover to see help</div>
                <span class="vertical-line"></span>
                <div id="required-tooltip"><span class="glyphicon glyphicon-exclamation-sign"></span> required fields</div>
            </div>
                    <form class="form-inline" role="form">
                        <div class="form-group right">
                            <label >Pseudo</label>
                            <input type="text" name="pseudo" id="pseudo" class="form-control" >
                            <div id="pseudo-tooltip">
                                <a href="#" title="this field is required! the pseudo must be unique">
                                    <span class="tooltip-me glyphicon glyphicon-exclamation-sign" ></span>
                                </a>
                                <a href="#" title="Enter the username of the account you want to create">
                                    <span class="tooltip-me glyphicon glyphicon-question-sign"></span>
                                </a>
                            </div>
                            
                        </div>
                        <div class="form-group left">    
                            <label  >Last name</label>
                            <input type="text" name="name" id="name" class="form-control" >
                            <div id="name-tooltip">
                                <a href="#" title="this field is required">
                                    <span class="tooltip-me glyphicon glyphicon-exclamation-sign"></span>
                                </a>
                                <a href="#" title="Enter the last name of the user you are creating">
                                    <span class="tooltip-me glyphicon glyphicon-question-sign" ></span>
                                </a>
                            </div>
                        </div>
                    </form>
                    <form class="form-inline" role="form">
                        <div class="form-group right">
                            <label  for="firstname">First name</label>
                            <input type="text" name="name" id="firstname" class="form-control" >
                            <div id="firstname-tooltip">
                                <a href="#" title="this field is required">
                                    <span class="tooltip-me glyphicon glyphicon-exclamation-sign"></span>
                                </a>
                                <a href="#" title="Enter the first name of the user you are creating">
                                    <span class="tooltip-me glyphicon glyphicon-question-sign"></span>
                                </a>
                            </div>
                        </div>
                        <div class="form-group left">    
                            <label for="email">Email</label>
                            <input type="email" name="email" id="email" value="" class="form-control" >
                            <div id="email-tooltip">
                                <a href="#" title="this field is required">
                                    <span class="tooltip-me glyphicon glyphicon-exclamation-sign"></span>
                                </a>
                                <a href="#" title="Enter the email of the user you are creating">
                                    <span class="glyphicon glyphicon-question-sign"></span>
                                </a>
                            </div>
                        </div>
                    </form>
                    <form class="form-inline " role="form">
                        <div id="location-wrapper right" class="form-group right">
                            <label for="location">Location</label>
                            <input type="text" name="location" id="location" value="" class="form-control"  >
                            <a href="#" title="Enter the locaion of the user you are creating. The location is the address of the user">
                                <span id="location-tooltip" class="glyphicon glyphicon-question-sign"></span>
                            </a>
                        </div>
                        <div class="form-group left">    
                            <label for="isadmin" id="label-admin">Admin</label>
                            <input type="checkbox" name="isadmin" id="isadmin" >
                            <a href="#" title="check to grant administration right to this user">
                                <span id="admin-tooltip" class="tooltip-me glyphicon glyphicon-question-sign"></span>
                            </a>
                        </div>
                    </form>   
        </div>
            
    </div>
    <div id="users-contain" class="ui-widget">
        <h1 id="title">Users added recently</h1>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Name</th>
                    <th>First name</th>
                    <th>Pseudo</th>
                    <th>Email</th>
                    <th>Password</th>
                    <th>Admin</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    
                </tr>
            </tbody>
        </table>
    </div>
    <div id="footer">
        <div id="error"></div>
        <button id="create-user">
            <span class="glyphicon glyphicon-user"></span>
            Create new user
        </button>
        <a href="<c:url value="/chat" /> " id="return-chat">
            <span class="glyphicon glyphicon-comment"></span>
            Back to chat page
        </a>
        <a href="<c:url value="/home" /> " id="return-home">
            <span class="glyphicon glyphicon-home"></span>
            Back to home page
        </a>
    </div>
</body>
</html>